<template>
  <div id="TopNav">
    <div class="logo" @click="goPage(0)">LOGO</div>
    <div class="lists">
        <div class="first">
            <ul>
                <li v-for="(item,index) in lists" :key='index' 
                :class="{active:NavIndex==index}" 
                @click="bottom_light(index);lists[index].isSecond?second_show():'';goPage(index)">
                    <span :class="icoClass[index]"></span>
                    &nbsp;{{item.first}}&nbsp;
                    <span class="icon-ctrl2" :class="{isShow:!lists[index].isSecond}"></span>
                    <div class="second">
                        <ul :style="{display:!lists[index].isSecond?'none':''}">
                            <li v-for="(item,index_2) in lists[index].second" :key="index_2"
                            @click.stop="">
                                {{item}}
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <router-link to="/login" v-show="!loginInfo.isLogin">
        <div class="login_submit">
                <span class="icon-user"></span>
                登录
        </div>
    </router-link>
    <router-link to="/domain" v-show="loginInfo.isLogin">
        <div class="head_ico">
           <img src="http://s2gg6qsom.bkt.clouddn.com/head.png?e=1697198137&token=6Ksqbbi_TW-542-Nw6meVOx0y6AUtVhjl0Ot7t-j:HeCpHYuMexvYvBCRDdiJ-yFaoxg=" alt="">
        </div>
    </router-link>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'

export default {
    name: "TopNav",
    data() {
        return {
            NavIndex: 0,
            lists: [
                {
                    isSecond: false,//是否有二级目录
                    first: '首页'//一级目录
                },
                {
                    isSecond: false,//是否有二级目录
                    first: '文章'//一级目录
                },
                {
                    isSecond: false,//是否有二级目录
                    first: '文章分类'//一级目录
                },
                {
                    isSecond: true,//是否有二级目录
                    first: '娱乐厅',//一级目录
                    second: ['听音乐','玩游戏']
                }
            ],
            icoClass: ['icon-home3','icon-file-text','icon-list-numbered','icon-earth'],
            goPageLists: ['/home','/home','/articleType']
        }
        
    },
    computed: {
        ...mapState(['loginInfo']),
    },
    methods: {
        ...mapMutations([]),

        bottom_light(val) {
            this.NavIndex=val
        },
        topNav_active() {
            
        },
        handleScroll() {
            // 设备/屏幕高度
            let clientHeight = document.documentElement.clientHeight || document.body.clientHeight          
            let offestHeight = document.documentElement.offsetHeight       
            // 滚动区域到头部的距离
            let scrollTop=document.documentElement.scrollTop
            // console.log(scrollTop);
            //topNav透明的设置
            let topNav = document.querySelector('#TopNav')
            if(scrollTop>0) {
                topNav.classList.add('topNav_active')
            } else {
                topNav.classList.remove('topNav_active')
            }
            //滚动条的总高度
            // let scrollHeight = scrollObj.scrollHeight
            // 滚动条到底部的条件
            // if (scrollTop + clientHeight == scrollHeight) {
            //   // 滚动区域到头部的距离 + 屏幕高度 = 可滚动的总高度
            //   this.loadMore()
            // }
        },
        second_show() {
            let second_lists = document.querySelectorAll('.second ul li')
            second_lists.forEach(e => {
                e.classList.toggle('second_active')
            });
        },
        goPage(index) {
            this.$router.push(this.goPageLists[index],() => {},() => {});
        }
    },
    mounted() {

        // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
        window.addEventListener('scroll', this.handleScroll)

        this.topNav_active();

        this.bottom_light(this.NavIndex);

    },
    beforeDestroy() {
        // 离开这个页面销毁滚动条事件，不然会给每一个页面都触发
        window.removeEventListener('scroll', this.handleScroll)
    },

}
</script>

<style scoped>
#TopNav {
    width: 100%;
    position: fixed;
    height: 60px;
    background-color: rgba(255, 255, 255,.1);
    z-index: 100;
    top: 0;
    left: 0;
    transition: all 1s ease;
    box-shadow: 0 2px 3px hsla(0,0%,7%,.1), 0 0 0 1px hsla(0,0%,7%,.1);
}

.logo {
    float: left;
    font-size: 30px;
    line-height: 60px;
    padding:0 50px;
    user-select: none;
    z-index: 10;
}

.logo:hover {
    background-color: #fff;
}


.lists {
    float: left;
    position: relative;
    user-select: none;
}

.lists>span {
    position: absolute;
}

.lists .first ul>li {
    float: left;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 14px;
    padding: 0 20px;
    color: #909399;
    position: relative;
}


.lists .first ul>li:hover {
    background-color: #fff;
    cursor: pointer;
}

/* .active {
    border-bottom: 2px solid #00BFFF;
    color: #00BFFF!important;
} */

.topNav_active {
    background-color: rgba(255, 255, 255,.8)!important;
}

.icon-ctrl2 {
    font-size: 20px;
    display: inline-block;
}

.isShow {
    display: none;
}

.login_submit {
    width: 80px;
    height: 60px;
    float: right;
    font-size: 14px;
    color: #909399;
    margin-right: 100px;
    text-align: center;
    line-height: 60px;
}

.login_submit:hover {
    cursor: pointer;
    background-color: #fff;
}

.head_ico {
    width: 80px;
    height: 60px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 100px;
}

.head_ico>img {
    width: 40px;
    height:40px;
}



.second ul {
    position: absolute;
    width: 100%;
    display: block;
    top: 100%;
    left: 0;
    background-color: #fff;
}

.second ul>li {
    width: 100%;
    text-align: center;
    transition: all 1s linear;
    display: none;
}

.second ul>li.second_active {
    display: block;
}

.second ul>li:hover{
    color: black;
}


</style>